﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section styles{
    <style>
        #channel-tree {
            width: 100% !important;
            height: -webkit-calc(100vh - 95px);
            height: -moz-calc(100vh - 95px);
            height: calc(100vh - 95px);
        }

        .bottom {
            width: 100%;
            position: absolute;
            bottom: 0px;
            left: 0px;
            height: 50px;
            line-height: 50px;
            border-top: 1px solid #eee;
            background-color: #fff;
        }

        .layoutrow {
            display: flex;
            justify-items: left;
            margin-bottom: 10px;
        }

        .layout-title {
            padding: 0px 8px;
            font-size: 14px;
            flex: 0 0 150px;
        }

        .layout-content {
            padding: 0px 8px;
            text-align: left;
        }

        #channel-tree-empty {
            text-align: center;
        }

        .layui-input-block-w {
            margin-left: 120px;
        }

        .layui-form-item-b {
            margin-bottom: 0px !important;
        }
    </style>
}

<div class="layui-row layui-col-space10">
    <div class="layui-col-xs3">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row" style="margin-bottom:15px;">
                    <label class="layui-form-label">栏目名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="channelame" placeholder="" class="layui-input">
                    </div>
                    <button type="button" class="pear-btn pear-btn-md pear-btn-primary" id="btn_TreeFuzzySearch">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                </div>
                <div style="overflow: auto" class="divscrollbar">
                    <ul id="channel-tree-empty" class="layui-hide">没有匹配数据</ul>
                    <ul id="channel-tree" class="dtree" data-id="0"></ul>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs9">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <select name="titleType">
                                <option value="1">标题</option>
                                <option value="2">副标题</option>
                                <option value="3">作者</option>
                                <option value="4">来源</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="" class="layui-input">
                        </div>

                        <div class="layui-input-inline">
                            <input type="checkbox" name="containschildren" lay-skin="primary" title="包含子集栏目" checked="">
                            <a style="position: relative; top: 5px;cursor: pointer;" class="layui-font-cyan" id="Sifting">
                                筛选
                                <i class="layui-icon layui-icon-down layui-font-12"></i>
                            </a>
                        </div>


                        <input type="hidden" id="channelId" name="channelId" value="" />
                        <input type="hidden" id="checkedIds" name="checkedIds" value="" />
                        <input type="hidden" id="contentAttrIds" name="contentAttrIds" value="" />
                        <input type="hidden" id="groupNames" name="groupNames" value="" />
                        <input type="hidden" id="tagNames" name="tagNames" value="" />
                        <button class="pear-btn pear-btn-md pear-btn-primary" id="btnSearch" lay-submit lay-filter="content-query">
                            <i class="layui-icon layui-icon-search"></i>
                            查询
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md">
                            <i class="layui-icon layui-icon-refresh"></i>
                            重置
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="content-table" lay-filter="content-table"></table>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="content-toolbar">

    @{
        await Html.RenderPartialAsync("_ToolbarAuthTpl", new SystemFunctionModel
            {
                MenuKey = SysMenuConstant.MENU_CMS_NEWS_NRGL,//{ "Audit", "审核" },
                FunDictionary = new Dictionary<string, string> { { "Add", "新增" }, { "Delete", "删除" }, { "Attributes", "属性" }, { "Taxis", "排序" }, { "Copy", "复制" }, { "More", "更多" } }
            });
    }
</script>

<script type="text/html" id="content-bar">
    @{
        await Html.RenderPartialAsync("_OperationTpl", new SystemFunctionModel
            {
                MenuKey = SysMenuConstant.MENU_CMS_NEWS_NRGL,
                FunDictionary = new Dictionary<string, string> { { "Update", "编辑" }, { "Delete", "删除" } }
            });
    }
</script>
@{
    await Html.RenderPartialAsync("_CheckedState");
}

<script type="text/html" id="title-format">
    <span>{{ d.title }}</span>
    {{# if(d.top==1){ }}
    <span class="layui-badge layui-bg-cyan">顶</span>
    {{# } }}
     {{# if(d.recommend==1){ }}
    <span class="layui-badge layui-bg-green">荐</span>
    {{# } }}
     {{# if(d.hot==1){ }}
    <span class="layui-badge layui-bg-blue">热</span>
    {{# } }}
     {{# if(d.color==1){ }}
    <span class="layui-badge">醒</span>
    {{# } }}
</script>
@section scripts{
    <script>
        layui.use(['form', 'lscom', 'dtree', 'dropdown', 'table'], function () {
            let dtree = layui.dtree;
            let form = layui.form;
            let $ = layui.jquery;
            let lscom = layui.lscom;
            let dropdown = layui.dropdown;
            let table = layui.table;
            let MODULE_PATH = "/Cms/Content/";
            let channelId = 0;

            var istoolbar = $.trim($("#content-bar").html()) == "" ? true : false;
            let cols = [
                [{
                    type: 'checkbox',
                    width: 80
                },
                {
                    title: '标题',
                    field: 'title',
                    align: 'left',
                    templet: '#title-format'
                },
                {
                    title: '添加时间',
                    field: 'createDate',
                    align: 'left',
                    width: 150
                },
                {
                    title: '状态',
                    field: 'checkedState',
                    templet: '#checked-state',
                    align: 'left',
                    width: 140
                },
                {
                    title: '操作',
                    templet: '#content-bar',
                    align: 'center',
                    width: 150,
                    hide: istoolbar
                }
                ]
            ];

            table.render({
                elem: '#content-table',
                url: MODULE_PATH + "GetList",
                page: true,
                cols: cols,
                skin: 'line',
                height: 'full-165',
                toolbar: '#content-toolbar',
                defaultToolbar: [{
                    title: '刷新',
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports'],
                done: function (res, curr, count) {
                    dropdown.render({
                        elem: '.btnmore'
                        , data: [{
                            title: '设置分组'
                            , id: 100
                        }, {
                            title: '设置标签'
                            , id: 101
                        }, {
                            title: '整理排序'
                            , id: 102
                        }, {
                            title: '设置点击量'
                            , id: 103
                        }]
                        , click: function (obj) {
                            //layer.tips('点击了：' + obj.title, this.elem, { tips: [1, '#5FB878'] })
                            if (obj.id == 100 || obj.id == 101 || obj.id == 103) {
                                let checkData = table.checkStatus("content-table").data;
                                    if (checkData.length === 0) {
                                        parent.layer.msg("未选中数据", {
                                            icon: 3,
                                            time: 1000
                                        });
                                        return false;
                                    }
                                    var ids = checkData.map(function (d) { return d.id; });
                                    if(obj.id == 100){
                                         window.group(ids);
                                    }
                                    if(obj.id == 101){
                                         window.tags(ids);
                                    }
                                     if(obj.id == 103){
                                        window.hits(ids);
                                    }
                            }
                            if(obj.id == 102){
                                    if (channelId === 0) {
                                        parent.layer.msg("请选择栏目", {
                                            icon: 3,
                                            time: 1000
                                        });
                                        return false;
                                    }
                                window.arrange(channelId);
                            }
                        }
                    });
                }
            });

            table.on('tool(content-table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'Delete') {
                    window.remove(data.id);
                } else if (obj.event === 'Update') {
                    window.edit(data.id);
                }
            });

            table.on('toolbar(content-table)', function (obj) {
                if (obj.event === 'Add') {
                    window.add();
                } else if (obj.event === 'refresh') {
                    window.refresh();
                } else if (obj.event === 'Delete') {

                    let checkData = table.checkStatus(obj.config.id).data;
                    if (checkData.length === 0) {
                        parent.layer.msg("未选中数据", {
                            icon: 3,
                            time: 1000
                        });
                        return false;
                    }
                    var ids = checkData.map(function (d) { return d.id; });
                    window.remove(ids.join(','));
                } else if (obj.event === 'Attributes') {
                    let checkData = table.checkStatus(obj.config.id).data;
                    if (checkData.length === 0) {
                        parent.layer.msg("未选中数据", {
                            icon: 3,
                            time: 1000
                        });
                        return false;
                    }
                    var ids = checkData.map(function (d) { return d.id; });
                    window.attributes(ids.join(','));
                } else if (obj.event === 'Taxis') {
                    let checkData = table.checkStatus(obj.config.id).data;
                    if (checkData.length === 0) {
                        parent.layer.msg("未选中数据", {
                            icon: 3,
                            time: 1000
                        });
                        return false;
                    }
                    var ids = checkData.map(function (d) { return d.id; });
                    window.taxis(ids);

                } else if (obj.event === 'Copy') {
                    let checkData = table.checkStatus(obj.config.id).data;
                    if (checkData.length === 0) {
                        parent.layer.msg("未选中数据", {
                            icon: 3,
                            time: 1000
                        });
                        return false;
                    }
                    var ids = checkData.map(function (d) { return d.id; });
                    window.copy(ids);
                }
            });

            form.on('submit(content-query)', function (data) {
                table.reload('content-table', {
                    where: data.field
                });
                return false;
            });

            let TreeFuzzySearch = dtree.render({
                elem: "#channel-tree",
                initLevel: "10",

                line: true,
                ficon: ["-1"],
                icon: ["0", "7"],
                method: 'get',
                url: "/Cms/Channel/GetChannelDtree",
                response: {
                    message: "msg",
                    statusCode: 0,
                },
                none: "没有数据",
                dataStyle: "layuiStyle",
                dataFormat: "list",
                done: function (res, $ul, first) {
                }
            });

            lscom.ajax({
                url: "/Cms/Content/GetContentDropdown",
                type: 'GET',
                lsHandleError: false
            }).done(function (data) {
                if (data.code == 0) {
                    console.log(data);
                    //重定义内容
                    var checkedListHtml = '', contentAttrListHtml = '', groupNamesListHtml = '', tagNamesList = '';
                    $.each(data.data.checkedList, function (k, v) {
                        checkedListHtml += '<input type="checkbox" name="checkedList" lay-skin="primary" title="' + v.title + '"  value="' + v.id + '" lay-filter="chkaudit">';
                    });
                    $.each(data.data.contentAttrList, function (k, v) {
                        contentAttrListHtml += '<input type="checkbox" name="contentAttrList" lay-skin="primary" title="' + v.title + '"  value="' + v.id + '"  lay-filter="chkattr">';
                    });
                    $.each(data.data.groupNamesList, function (k, v) {
                        groupNamesListHtml += '<input type="checkbox" name="groupNamesList" lay-skin="primary" title="' + v.title + '"   value="' + v.id + '" lay-filter="chkgroupName">';
                    });
                    $.each(data.data.tagNamesList, function (k, v) {
                        tagNamesList += '<option value="' + v.title + '">' + v.title + '</option>';
                    });
                    var itemcontent = [];
                    itemcontent.push('<div class="layui-form" lay-filter="search-dropdown-form">');
                    itemcontent.push('<div class="layui-form-item layui-form-item-b">');
                    itemcontent.push('<label class="layui-form-label" style="width:90px;">审核状态</label><div class="layui-input-block layui-input-block-w" >' + checkedListHtml + '</div>');
                    itemcontent.push('</div>');
                    itemcontent.push('<div class="layui-form-item layui-form-item-b">');
                    itemcontent.push('<label class="layui-form-label" style="width:90px;">内容属性</label><div class="layui-input-block layui-input-block-w">' + contentAttrListHtml + '</div>');
                    itemcontent.push('</div>');
                    itemcontent.push('<div class="layui-form-item layui-form-item-b">');
                    itemcontent.push('<label class="layui-form-label" style="width:90px;">内容分组</label><div class="layui-input-block layui-input-block-w">' + groupNamesListHtml + '</div>');
                    itemcontent.push('</div>');
                    itemcontent.push('<div class="layui-form-item">');
                    itemcontent.push('<label class="layui-form-label" style="width:90px;">内容标签</label><div class="layui-input-block layui-input-block-w"> <select name="tags" lay-filter="tagsfilter" lay-search=""><option value="">直接选择或搜索选择</option>' + tagNamesList + '</select></div>');
                    itemcontent.push('</div>');
                    itemcontent.push('</div>');
                    dropdown.render({
                        elem: '#Sifting'
                        , content: itemcontent.join('')
                        , style: 'width: 520px; height: auto; padding: 0 15px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%);'
                        , ready: function () {

                            form.render(null, 'search-dropdown-form');

                            form.on('select(tagsfilter)', function (data) {
                                $("#tagNames").val(data.value);
                                $('#btnSearch').click();
                            });
                            form.on('checkbox(chkaudit)', function (data) {
                                var items = [];
                                $("input[name='checkedList']:checked").each(function () {
                                    items.push($(this).val())
                                });
                                $('#checkedIds').val(items.join(','));
                                $('#btnSearch').click();
                            });
                            form.on('checkbox(chkattr)', function (data) {
                                var items = [];
                                $("input[name='contentAttrList']:checked").each(function () {
                                    items.push($(this).val())
                                });
                                $('#contentAttrIds').val(items.join(','));
                                $('#btnSearch').click();
                            });
                            form.on('checkbox(chkgroupName)', function (data) {
                                var items = [];
                                $("input[name='groupNamesList']:checked").each(function () {
                                    items.push($(this).val())
                                });
                                $('#groupNames').val(items.join(','));
                                $('#btnSearch').click();
                            });
                        }
                    });
                }
            }).fail(function (message) {
                lscom.notify.error(message);
            })



            dtree.on("node(channel-tree)", function (obj) {
                $('#channelId').val(obj.param.nodeId);
                channelId = obj.param.nodeId;
                $('#btnSearch').click();
            });

            $("#btn_TreeFuzzySearch").click(function () {
                var input = $("input[name='channelame']").val();
                // 调用内置函数搜索节点
                TreeFuzzySearch.fuzzySearch(input);
                if ($("#channel-tree>li").hasClass('layui-hide')) {
                    $("#channel-tree-empty").removeClass("layui-hide");
                } else {
                    $("#channel-tree-empty").addClass("layui-hide");
                }
            });

            window.add = function () {
                if (channelId === 0) {
                    parent.layer.msg("请选择栏目", {
                        icon: 3,
                        time: 1000
                    });
                    return false;
                }
                var muilttab = localStorage.getItem("muilt-tab");
                if (muilttab == "true") {
                    parent.layui.admin.closeTab(99001);
                }
                parent.layui.admin.jump(99001, "新增内容", MODULE_PATH + 'Create' + lscom.utils.formatString("?id={0}", channelId));

            }
            window.edit = function (id) {
                var muilttab = localStorage.getItem("muilt-tab");
                if (muilttab == "true") {
                    parent.layui.admin.closeTab(99002);
                }
                parent.layui.admin.jump(99002, "修改内容", MODULE_PATH + 'Edit' + lscom.utils.formatString("?id={0}", id));

            }

            window.remove = function (data) {
                parent.layer.confirm('确定删除吗?', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    parent.layer.close(index);
                    let waitIndex = parent.layer.load(2);
                    lscom.ajax({
                        url: MODULE_PATH + 'Delete',
                        data: JSON.stringify({ "ids": data }),
                        lsHandleError: false
                    }).done(function (data) {
                        if (data.code == 0) {
                            lscom.notify.success(data.message);
                           window.refresh();
                        }
                    }).fail(function (message) {
                        lscom.notify.error(message);
                    }).always(function () {
                        parent.layer.close(waitIndex);
                    });
                });
            }

            window.attributes = function (id) {
                parent.layer.open({
                    type: 2,
                    title: '批量设置属性',
                    shade: 0.1,
                    area: ['50%', '50%'],
                    content: MODULE_PATH + 'Attr' + lscom.utils.formatString("?id={0}", id),
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        parent.window['layui-layer-iframe' + index].submitForm();
                    }
                });
            }

            window.taxis = function (id) {
                parent.layer.open({
                    type: 2,
                    title: '内容排序',
                    shade: 0.1,
                    area: ['50%', '50%'],
                    content: MODULE_PATH + 'Taxis' + lscom.utils.formatString("?id={0}", id),
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        parent.window['layui-layer-iframe' + index].submitForm();
                    }
                });
            }

            window.copy = function (id) {
                parent.layer.open({
                    type: 2,
                    title: '批量复制',
                    shade: 0.1,
                    area: ['80%', '70%'],
                    content: MODULE_PATH + 'Translate' + lscom.utils.formatString("?id={0}", id),
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        parent.window['layui-layer-iframe' + index].submitForm();
                    }
                });
            }

            window.group = function (id) {
                parent.layer.open({
                    type: 2,
                    title: '内容设置分组',
                    shade: 0.1,
                    area: ['50%', '50%'],
                    content: MODULE_PATH + 'Group' + lscom.utils.formatString("?id={0}", id),
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        parent.window['layui-layer-iframe' + index].submitForm();
                    }
                });
            }

            window.tags = function (id) {
                parent.layer.open({
                    type: 2,
                    title: '内容设置标签',
                    shade: 0.1,
                    area: ['50%', '50%'],
                    content: MODULE_PATH + 'Tags' + lscom.utils.formatString("?id={0}", id),
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        parent.window['layui-layer-iframe' + index].submitForm();
                    }
                });
            }

            window.arrange = function (id) {
                parent.layer.open({
                    type: 2,
                    title: '内容整理排序',
                    shade: 0.1,
                    area: ['50%', '50%'],
                    content: MODULE_PATH + 'Collating' + lscom.utils.formatString("?id={0}", id),
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        parent.window['layui-layer-iframe' + index].submitForm();
                    }
                });
            }

            window.hits = function (id) {
                parent.layer.open({
                    type: 2,
                    title: '内容设置点击量',
                    shade: 0.1,
                    area: ['50%', '50%'],
                    content: MODULE_PATH + 'Hits' + lscom.utils.formatString("?id={0}", id),
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        parent.window['layui-layer-iframe' + index].submitForm();
                    }
                });
            }

            window.saveCallback = function (data) {
                parent.layer.close(data.index);
                lscom.notify.success(data.message);
                dtree.reload("channel-tree");
                table.reload('content-table');
            }
            window.refresh = function () {
                dtree.reload("channel-tree");
                table.reload('content-table');
            }
        });
    </script>
}
